<template>
	<view class="containe">
		<view class="coupon-box">
			<view class="coupon-title">优惠卷</view>
			<view class="coupon">
				<u-row customStyle="margin-bottom: 20rpx"  >
					<u-col span="6" v-for="(item,index) in coupon"><view class="demo-layout bg-purple-light">
					<view class=""> 
					<view class="">
						{{item.tag}}
					</view>
					<view style="color: red;">
						{{item.discount}}元
					</view>
					<view class="">
						满{{item.min}}使用
					</view>
					</view>
					<view class="">
					<view class="">
						{{item.name}}
					</view>
					<view class="">
						{{item.desc}}
					</view>
					<view class="">
						有效期:{{item.days}}天
					</view>
					</view>
					
					</view></u-col>
				
				</u-row>
			</view>
		</view>
<!-- 	//团购	 -->
		<view class="every-group">
			<view class="every-group-title">天天团购</view>
			<view class="">
	
		   <view class="goods-group">
			<view class="goods-group-list" v-for="(item,index) in grouponList" @click="jump(item.id)">
				<view class="goods-img">
					<image :src="item.picUrl" mode=""></image>
				</view>
				<view class="goods-right">
					<view class="goods-right_title ">
						<text class="text1">{{item.name}}</text>	
						<text class="text">{{item.grouponMember}}人成团</text>
					</view>
					<view class="goods-right_date">
						有效期至{{item.expireTime}}
					</view>
					<view class="goods-right_role">
						{{item.brief}}
					</view>
					<view class="goods-right_price">
						<text class="line_through">现价:￥{{item.counterPrice}}</text>  <text style="color: #F9AE3D;">团购价:￥{{item.retailPrice}}</text> 
					</view>
				</view>
			</view>  
			   
			   
		   </view>
		
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Coupon',
	data() {
		return {
		
		};
	
	},
		props:['coupon','grouponList'],
		onLoad() {
			
		},
	methods: {
		
			//传id到详情
			jump(index){
				uni.navigateTo({
					url:'../../pages/productDetails/productDetails?id='+index
				})
			}
		}
};
</script>

<style lang="scss" scoped>
	.containe{
	
.coupon-box {
	width: 100vw;
	height: 280rpx;
	.coupon-title {
		text-align: center;
	}
	.coupon {
	   margin-top: 10rpx;
		.bg-purple-light,.bg-purple{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 200rpx;
			margin: 0 10rpx;
		 	background-color: #ffaa00;
			color:#FFFFFF;
			view{
				padding: 5rpx;
			}
		}
	}
}
.every-group{
	height:100%;
	.every-group-title{
		text-align: center;
		
		
	}
	.scroll-list {
		@include flex(column);
		margin-top: 30rpx;
		&__goods-item {
			margin-right: 40rpx;
	
			&__image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
			}
	
			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	
		&__show-more {
			background-color: #fff0f0;
			border-radius: 6rpx;
			padding: 6rpx 12rpx;
			@include flex(column);
			align-items: center;
	
			&__text {
				font-size: 24rpx;
				width: 24rpx;
				color: #f56c6c;
				line-height: 32rpx;
			}
		}
	}
}
.goods-group{
	.goods-group-list{
		display: flex;
		justify-content:space-around;
		.goods-img image{
			width: 200rpx;
			height: 150rpx;
			margin-top: 25rpx;
		}
		view{
			padding: 10rpx 0;
		}
		.goods-right{
			width: 65%;
			.goods-right_title{
				color: #45474a;
				.text{
					
					padding: 5rpx;
					background-color: #1989FA;
					color: #FFFFFF;
				}
			}
			.goods-right_date{
				background-color: #ffaa7f;
				border-radius: 30rpx;
				color: #FFFFFF;
			}
			.goods-right_role{
				color: #adadb0;
				font-size: 25rpx;
			}
			.goods-right_price{
				.line_through{
					text-decoration: line-through;
					color: #adadb0;
					margin-right: 50rpx;
					}
				
					
			}
		}
		
	}
	
	
}
}
</style>
